import React, { useEffect, useState } from "react";
import "./index.scss";
import { Card } from "antd";
import AntvVisit from "../../../components/AntvCharts/AntvVisit";
import SpNavCom from "../../../components/SpNavCom";
import { NavData } from "../../../assets/data/speed-data";
import CardCoverItem from "../../../components/CardCoverItem";
import api from "../../../api";
const Workbench = (props) => {
  const [newArticleList, setNewArticleList] = useState([]);
  useEffect(() => {
    init();
  }, []);
  const init = () => {
    getNewArticleList();
  };
  //获取最新文章数据
  const getNewArticleList = async () => {
    const res = await api.getNewArticle();
    setNewArticleList([...res.data]);
  };
  //跳转路由
  const goUrl = (path) => {
    window.location.href = path;
  };
  //去详情
  const goArticleDetail = (id) => {
    props.history.push("/article/" + id);
  };
  return (
    <div className="workbench">
      <Card title="面板导航" bordered={false}>
        <AntvVisit target={"container"}></AntvVisit>
        <div id="container"></div>
      </Card>
      <Card title="快速导航" bordered={false}>
        <SpNavCom data={NavData} handlerClick={goUrl}></SpNavCom>
      </Card>
      <Card
        title="最新文章"
        extra={
          <a href="/allarticle" className="allArticle-link">
            全部文章
          </a>
        }
      >
        <div className="newArticle_wrapper">
          {newArticleList?.length &&
            newArticleList.map((item) => {
              return <CardCoverItem handlerInfoClick={goArticleDetail} info={item} key={item.id}></CardCoverItem>;
            })}
        </div>
      </Card>
    </div>
  );
};

export default Workbench;
